import { memo, useRef } from "react";
function Counts() {
  console.log('in count');

  const renderCount = useRef(0);
  console.log(renderCount.current)
  return (
    <div className="mt-3">
      <p className="dark:text-white">
        Nothing has changed here but I've now rendered:{" "}
        <span className="dark:text-green-300 text-grey-900">
          {(renderCount.current++)} time(s)
        </span>
      </p>
    </div>
  );
}

// 1
// export default Counts; 

// 2
export default memo(Counts);